<template>
	<view class="full-page" v-if="totalPage">
		
	</view>
	<view class="orderlist" v-else>
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back">
			<view slot="center">
				<view class="serbox">
					<image :src="'/images/search.png' | formatImgUrl" class="serpic" mode=""></image>
					<input type="text" class="serput" placeholder="搜索派单信息" v-model="like" @input="onSearch" style="width: 500rpx;">
				</view>
			</view>
		</u-navbar>
		<!-- 筛选 -->
		<view class="fix-top">
			<!-- <view class="serbox">
				<image :src="'/images/search.png' | formatImgUrl" class="serpic" mode=""></image>
				<input type="text" class="serput" placeholder="搜索派单信息" v-model="like" @input="onSearch">
			</view> -->
			<view class="filter-box">
				<fy-dropdown :menuList="menuList" ref="frd">
					<fy-dropdown-item v-model="synthesisValue" dropdownKey="synthesis" current="0" :options="columnOptions"
						type="column" @change="handlerColumnChange($event,1)" @onFinish='onFinish'></fy-dropdown-item>
					<fy-dropdown-item v-model="priceValue" dropdownKey="price" current="1" :options="priceOptions" type="column"
						@change="handlerColumnChange($event,2)" @onFinish='onFinish'></fy-dropdown-item>
					<fy-dropdown-item v-model="salesValue" dropdownKey="sales" current="2" :options="salesOptions" type="column"
						@change="handlerColumnChange($event,3)" @onFinish='onFinish'></fy-dropdown-item>
					<fy-dropdown-item v-model="totalValue" dropdownKey="total" currentType='2' current="3" :options="totalOptions" type="column"
						@change="handlerColumnChange($event,4)" @onFinish='onFinish'></fy-dropdown-item>
				</fy-dropdown>
			</view>
		</view>

		<view class="empytView" v-if="list.length<=0">
			<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
			<!-- <view>- 空列表 -</view> -->
		</view>

		<view class="cont" v-for="(item,index) in list" @click="$go('/task/list/user_order_dea?id='+item.id)">
			<view class="cont_s">
				<view class="con_top">
					<view>剩余时间：
						<wly-countdown :hour="getDateStr(item.sy_time,1)" :minute="getDateStr(item.sy_time,2)"
							:second="getDateStr(item.sy_time,3)" showType="slot">
							<template v-slot="{day, hour, minute, second}">
								<view v-if="day||hour||minute||second">

									<view class="time_model">
										<view>
											{{hour}}
										</view>
										<view>
											:
										</view>
									</view>
									<view class="time_model">
										<view>
											{{minute}}
										</view>
										<view>
											:
										</view>
									</view>
									<view class="time_model">
										<view>
											{{second}}
										</view>
									</view>
								</view>
							</template>
						</wly-countdown>
					</view>

					<view v-if="item.is_qiang==1"> 等待匹配</view>
					<view v-else>申请抢单</view>
				</view>

				<view class="con_nav">
					<view class="navs">
						<view class="icon">订</view>
						<view class="navs_right">
							<view class="tp">
								字数共计{{item.tran_font_num}}{{item.tran_font_word}}，
								<!-- 订单价格每{{item.tran_font_word}}{{item.tarn_price}}元 -->
								<text v-if="item.task_type==0">
									订单价格每{{item.tran_font_word}}{{item.tarn_price}}币
								</text>
								<text>
									订单价格共计{{parseInt(item.money)}}币
								</text>
							</view>
							<view class="bom">截稿时间：{{item.end_time.substring(0,16)}} 类型：{{item.c_desc}}</view>

						</view>
					</view>

					<view class="navs">
						<view class="icon xie">写</view>
						<view class="navs_right">
							<view class="tp">写手等级为:【{{array_level_arr(item.level)}}】</view>
							<view class="bom">写手性别要求:{{item.sex==0?"不限":(item.sex==1?"男":"女")}}
								{{item.is_bao==0?"":'用户要求作品保密'}}
							</view>
						</view>
					</view>
					<view class="con_bomt">
						<span>制作要求：</span>
						{{item.c_content}}
					</view>
				</view>
				<view class="bomt">
					<view class="bomt_a_left">此订单全额稿费预计</view>
					<view class="bomt_a_right">
						{{item.money}}
					</view>
				</view>
				<view class="bomt_one" v-if="item.is_qiang==0">
					<view @tap.stop="no_order(item)">不感兴趣</view>
					<view @tap.stop="apply_order(item)">申请抢单</view>
				</view>
				<view class="bomt_one" v-if="item.is_qiang==1">
					<view @tap.stop="tuichu_order(item)">退出抢单</view>
					<view>查看详情</view>
				</view>

			</view>
		</view>



		<view v-if="show1" class="zong">
			<view class="biaoqian">
				<view class="top">
					<image :src="userInfo.pic | formatImgUrl" mode=""></image>
					<view>{{userInfo.username}}</view>
					<view>申请抢单</view>
				</view>
				<view class="tab">
					<textarea placeholder-class="c1" v-model="form.cont" placeholder="可填写任意内容供付款方查看"></textarea>
				</view>
				<view class="not_like">
					<view class="tp">如有例文展示，请上传（选填）</view>

					<view class="imgView">
						<!-- <view v-for="(img,index) in form.img" class="imgList">
							<image :src="img | formatImgUrl" mode="aspectFill" style="width: 105rpx;height: 105rpx;">
							</image>
							
							<image :src="'/images/closeicon_g.png' | formatImgUrl" class="imgClose2" @click="deletePic(index)"
								mode="aspectFill" style="width: 20rpx;height: 20rpx;"></image>
						</view>
						<image :src="'/images/up.png' | formatImgUrl" mode="widthFix"
							style="width: 110rpx;height: 110rpx;" @click="onChooseImg"
							v-if="form.img&&form.img.length < 4"></image> -->
							
						<u-upload ref="uUpload" :uploadIcon="'/images/up.png' | formatImgUrl" :multiple="true" maxCount="4" width="78" height="78" :action="uploadImgUrl" :fileList="form.img" @afterRead='afterRead' @delete="deletePic">
						</u-upload>
					</view>


				</view>

				<view class="cont_t">
					<view class="t1" @click="qr_order()">
						<view class="tex">
							申请抢单
						</view>
					</view>
				</view>

				<image class="cl1" @click="show1=false" :src="'/images/cl1.png' | formatImgUrl" mode=""></image>
			</view>
		</view>

		<view v-if="show1" @click="show1=false" class="zhezhao">
		</view>


		<view class="zhanwei"></view>
		<view class="tarb_new">
			<view class="tar_home">
				<image :src="tar_index==0?'../static/image/tar_home1.png':'../static/image/tar_home.png'" mode="aspectFit">
				</image>
				<view>
					首页
				</view>
			</view>
			<view class="tar_order" @click="$go('/task/list/my_orderlist')">
				<image :src="tar_index==0?'../static/image/tar_order.png':'../static/image/tar_order1.png'" mode="aspectFit">
				</image>
				<view>
					订单
				</view>
			</view>
		</view>
		
		<!-- <dLoading :status="loading"></dLoading> -->
	</view>
</template>

<script>
	import * as db from '@/common/db.js'
	import fyDropdown from "@/components/fy-dropdown/fy-dropdown.vue"
	import fyDropdownItem from "@/components/fy-dropdown-item/fy-dropdown-item.vue"
	export default {
		data() {
			return {
				show1: false,
				tar_index: 0,
				form: {
					img: [],
					cont: "",
					id: ""
				},
				list: [],
				page: 1,
				info: {},
				userInfo: this.$db.get('userInfo'),
				
				menuList: [{
					title: '精准筛选',
					isSelected: false,
					dropdownKey: 'synthesis'
				}, {
					title: '起拍单数',
					isSelected: false,
					dropdownKey: 'price'
				}, {
					title: '价格范围',
					isSelected: false,
					dropdownKey: 'sales'
				}, {
					title: '综合排序',
					isSelected: true,
					dropdownKey: 'total'
				}],
				synthesisValue: '',
				columnOptions: [],
				priceValue: '',
				priceOptions: [{
					title: '起拍单数',
					key: 'type',
					default: '',
					tip: 'multi',
					list: [{
						text: '5单以下',
						selected: false,
						value: ''
					}, {
						text: '5-10单起拍',
						selected: false,
						value: '1'
					}, {
						text: '11-15单起拍',
						selected: false,
						value: '2'
					}, {
						text: '16-20单起拍',
						selected: false,
						value: '3'
					}, {
						text: '20单以上',
						selected: false,
						value: '4'
					}]
				}],
				salesValue: '',
				salesOptions: [
					{
						title: '价格单位',
						key: 'type',
						default: '',
						tip: 'single',
						list: [{
						text: '十字',
						selected: true,
						value: '0'
					}, {
						text: '百字',
						selected: false,
						value: '1'
					}, {
						text: '千字',
						selected: false,
						value: '2'
					}, {
						text: '万字',
						selected: false,
						value: '3'
					}, {
						text: '十万字',
						selected: false,
						value: '4'
					}, {
						text: '百万字',
						selected: false,
						value: '5'
					}]
					},
					
					{
					title: '价格范围',
					key: 'type',
					default: '',
					tip: 'multi',
					list: [{
						text: '50以下',
						selected: false,
						value: ''
					}, {
						text: '50-100',
						selected: false,
						value: '1'
					}, {
						text: '100-500',
						selected: false,
						value: '2'
					}, {
						text: '500-1000',
						selected: false,
						value: '3'
					}, {
						text: '1000-2000',
						selected: false,
						value: '4'
					}, {
						text: '2000-5000',
						selected: false,
						value: '5'
					}, {
						text: '5000以上',
						selected: false,
						value: '6'
					}]
				}],
				totalValue: '',
				totalOptions: [{
					title: '排序方式',
					key: 'type',
					default: '',
					tip: 'single',
					list: [{
						text: '正序',
						selected: true,
						value: ''
					}, {
						text: '倒序',
						selected: false,
						value: '1'
					}]
				}, {
					title: '排序类型',
					key: 'type',
					default: '',
					tip: 'single',
					list: [{
						text: '综合排序',
						selected: true,
						value: ''
					}, {
						text: '价格排序',
						selected: false,
						value: '1'
					}, {
						text: '评价排序',
						selected: false,
						value: '2'
					}]
				}],
				like: '',
				loading: '',
				fileList2: [],
				is_dong: '',
				totalPage: true
			}
		},
		components: {
			fyDropdown,
			fyDropdownItem
		},
		onReachBottom() {
			this.page++
			this.get_list();
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新	
			}, 800);
			this.page = 1;
			this.list = [];
			this.get_list()
		},
		onLoad() {
			this.getListType()
			this.getCustom()
		},
		onShow() {
			console.log(1111111);
			
			this.getListType()
			this.getAccountState()
		},
		onUnload(event) {
			//多层级跳转之后，监听左上角返回事件，直接退回到indexuni.navigateBack({delta:10});
			// uni.reLaunch({
			// 	url: '/pages/user/user'
			// })
		},
		created() {
			let that = this;
		},
		methods: {
			getSearch(){
				this.page = 1;
				this.list = [];
				this.get_list()
			},
			// 获取量词
			getCustom(){
				// 0共计字数 1起拍单价
				let that = this;
				this.$api.default.request('index/getQuantifier', {
					type: 0
				}, 'POST', false).then((res) => {
					let headList = res.data
					let list = []
					headList.forEach((ite,idx)=>{
						list.push({
							text: ite.title,
							selected: false,
							value: ite.id
						})
					})
					
					this.priceOptions[0].list = list
				})
				
				this.$api.default.request('index/getQuantifier', {
					type: 1
				}, 'POST', false).then((res) => {
					let headList = res.data
					let list = []
					headList.forEach((ite,idx)=>{
						list.push({
							text: ite.title,
							selected: false,
							value: ite.id
						})
					})
					
					this.salesOptions[1].list = list
				})
			},
			// 搜索框
			onSearch(){
				this.page = 1;
				this.list = [];
				this.get_list()
			},
			onFinish(data){
				// if (data.cancel) {
				// 	this.menuList[data.value].isSelected = false
				// };
				
				let filterArr = []
				data.data[0].list.filter(item => item.selected).map(item => {
					filterArr.push(item)
				});
				
				this.$nextTick(()=>{
					this.menuList[data.value].isSelected = filterArr.length ? true : false
				})
				
				if(data.value == 0){
					this.columnOptions = data.data	
				}else if(data.value == 1){
					this.priceOptions = data.data	
				} else if(data.value == 2){
					this.salesOptions = data.data	
				}else if(data.value == 3){
					this.totalOptions = data.data	
				}
				
				this.page = 1;
				this.list = [];
				this.get_list()
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			},
			getListType() {
				let that = this;
				this.$api.default.request('user/get_goods_list_type', {}, 'POST', false).then((res) => {
					let headList = res.data
					let list = []
					headList.forEach((ite,idx)=>{
						list.push({
							text: ite.tit,
							selected: false,
							value: ite.id
						})
					})
					
					this.columnOptions= [{
						title: '类型',
						key: 'type',
						default: '',
						tip: 'multi',
						list: list,
					}]
					
					
					this.page = 1;
					this.list = [];
					this.get_list()
				})
			},
			// 选择筛选条件
			handlerColumnChange(e,type) {
				console.log(e,111);
				if (e.cancel) {
					return
				};
				
				let list;
				if(type == 1){
					list = this.columnOptions
				}else if(type == 2){
					list = this.priceOptions
				} else if(type == 3){
					list = this.salesOptions
				}else if(type == 4){
					list = this.totalOptions
				}
				list.forEach((item,index) => {
					item.default = e.data[item.key];
					
					item.list.forEach((ite,idx)=>{
						if(e.data[idx] && ite.text == e.data[idx].text){
							ite.selected = true
						}
					})
				})
				
				
			},
			get_type_list2(){
				let that = this;
				this.$api.default.request('index/get_tag_class_tow', {
					pid: that.pid
				}, 'POST', false).then((res) => {
					let list = res.data
					let columnOptions = []
					list.forEach((item,index)=>{
						let obj ={
							title: item.name,
							key: 'type',
							default: '',
							tip: 'multi',
							list: []
						}
						console.log(item);
						item.list.forEach((ite,idx)=>{
							obj.list.push({
								text: ite.names,
								selected: false,
								value: ite.id
							})
						})
						
						columnOptions.push(obj)
					})
					
					this.columnOptions = columnOptions
				})
			},
			// 选择筛选条件
			handlerColumnChange(e,type) {
				console.log(e,'handlerColumnChange');
				if (e.cancel) return;
				
				this.$nextTick(()=>{
					this.menuList[type -1].isSelected = e.data.length ? true : false
				})
				
				let list;
				if(type == 1){
					list = this.columnOptions
				}else if(type == 2){
					list = this.priceOptions
				} else if(type == 3){
					list = this.salesOptions
				}else if(type == 4){
					list = this.totalOptions
				}
				
				list.forEach((item,index) => {
					item.default = e.data[item.key];
					
					item.list.forEach((ite,idx)=>{
						if(e.data[idx] && ite.text == e.data[idx].text){
							ite.selected = true
						}
					})
				})
			},
			no_order(item) {
				let str = "【不感兴趣将不再显示该订单】";
				let _this = this;
				uni.showModal({
					confirmColor: '#45C4B0',
					content: '是否设置不感兴趣？' + str,
					success: function(res) {
						if (res.confirm) {
							_this.$api.default.request('task/order_apply_nolike', {
								id: item.id
							}).then((res) => {
								if (res.code) {
									_this.$common.errorToShow('操作成功');

									_this.page = 1;
									_this.list = [];
									_this.get_list()

									return;
								}
							})
						} else if (res.cancel) {

						}
					}
				})

			},
			tuichu_order(item) {
				let str = "是否确认退出抢单";
				let _this = this;
				uni.showModal({
					confirmColor: '#45C4B0',
					content: '是否' + str,
					success: function(res) {
						if (res.confirm) {
							_this.$api.default.request('task/order_apply_qx', {
								id: item.id
							}).then((res) => {
								if (res.code) {
									_this.$common.errorToShow('退出成功');

									_this.page = 1;
									_this.list = [];
									_this.get_list()

									return;
								}
							})
						} else if (res.cancel) {

						}
					}
				})

			},
			qr_order() {
				if (this.form.cont == "" || this.form.cont == "  ") {
					this.$common.errorToShow('抢单原因必填');
					return;
				}
				this.form.id = this.info.id;
				
				this.form.img = this.fileList2

				let str = "确认抢单";
				let _this = this;
				uni.showModal({
					// cancelText: '取消',
					// confirmText: '确定',
					confirmColor: '#45C4B0',
					content: '是否' + str,
					success: function(res) {
						if (res.confirm) {

							_this.$api.default.request('task/order_apply', _this.form).then((res) => {
								if (res.code) {
									_this.show1 = false;
									_this.$common.errorToShow('操作成功');
									setTimeout(function() {

										uni.navigateTo({
											url: '/task/list/my_orderlist'
										})
									}, 800);
									return;

								}
							})
						} else if (res.cancel) {

						}
					}
				})
			},
			// 当前账号的冻结信息
			getAccountState(){
				this.$api.default.request('index/getStatus', {
					type: 3,//0冻结动态 1冻结聊天 2冻结橱窗 3抢单权限 4发单权限 5下单权限 6提现权限 7充值权限
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.is_dong = res.is_dong
					}
				})
			},
			apply_order(item) {
				if(this.is_dong == 1){
					this.$common.errorToShow('您的接单权限权限已被暂时关停')
					return
				}
				
				this.info = item;
				this.form = {
					img: [],
					cont: "",
					id: ""
				}
				this.show1 = true
			},
			getDateStr(mss, type) {
				var days = parseInt(mss / 86400);
				var hours = parseInt((mss - (days * 86400)) / 3600);
				var minutes = parseInt((mss - (days * 86400) - (hours * 3600)) / 60);
				var seconds = mss - (days * 86400) - (hours * 3600) - (minutes * 60)

				if (type == 0) {
					return days;
				}
				if (type == 1) {
					return hours;
				}
				if (type == 2) {
					return minutes;
				}
				if (type == 3) {
					return seconds;
				}

			},
			array_level_arr(index) {

				var array_level = ['不限', '1-10', '11-20', '21-30', '21-30', '31-40', '41-50'];
				return array_level[index];
			},
			get_list() {
				var _this = this;
				
				let type = []
				this.columnOptions[0].list.filter(item => item.selected).map(item => {
					type.push(item.text)
				});
				
				let tran_font_num = []
				this.priceOptions[0].list.forEach((item,index) => {
					if(item.selected){
						tran_font_num.push(item.value)
					}
				})
				
				let amount = []
				this.salesOptions[1].list.forEach((item,index) => {
					if(item.selected){
						amount.push(item.value)
					}
				})
				
				let word = "";
				this.salesOptions[0].list.forEach((item,index) => {
					if(item.selected){
						word = item.value;
					}
				})
				
				let currentType;
				this.totalOptions[0].list.forEach((item,index) => {
					if(item.selected){
						currentType = index == 0 ? 'asc' : 'desc'
					}
				})
				let order;
				this.totalOptions[1].list.forEach((item,index) => {
					if(item.selected){
						order = index
					}
				})
				
				
				
				_this.loading = true
				this.$api.default.request('task/task_orderList1', {
					page: this.page,
					type: type.join(','),
					tran_font_num: tran_font_num.join(','),
					amount: amount.join(','),
					like: this.like,
					order: order,
					order_str: currentType,
					word:word,
				}, 'POST', false).then((res) => {
					if (res.code) {
						if (res.data.data) {
							if (_this.page != 1) {
								// this.articleList.concat(res.data.data);
								_this.list = _this.list.concat(res.data.data);
								// res.data.data.forEach((item) => {
								// 	this.logList.push(item)
								// })
							} else {
								_this.list = res.data.data;
							}
							
							_this.loading = false
						}
					}
					
					_this.totalPage = false
				})
			},
			close() {
				this.show = false
			},

			// 删除图片
			deletePic(index) {
				this.form.img.splice(index, 1)
				this.fileList2.splice(index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.form.img.length
				lists.map((item) => {
					this.form.img.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.form.img[fileListLen]
					this.form.img.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.uploadImgUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let datas = JSON.parse(res.data)
							this.fileList2.push(datas.url)
							setTimeout(() => {
								resolve(datas.url)
							}, 300)
						}
					});
				})
			},
			onChooseImg() {
				let auth = db.get('auth');
				console.log(auth, 777777777)
				//用户存在，不跳转，不存在直接跳转
				if (!auth) {
					// toLogin()
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				this.$common.chooseImage({}, (data) => {
					if (data) {
						this.form.img.push(data)
					}
				}, 9)
			},
			goToxie() {
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + this.$config.default.Url + '/agreement/1000009'
				})
			},
			hidePay(e) {
				console.log(e)
			},
			goPay() {

				this.$api.default.request('order/createvip', prams).then((res) => {
					if (res.code) {
						this.$common.wxPay(res.data, () => {

							that.$common.errorToShow('支付成功');
							setTimeout(function() {
								uni.navigateTo({
									url: '/pages/user/orderdetail?id=' + this.orderInfo.id
								})
							}, 800);
						})
					}
				})

			},
			isReadTip() {
				if (!this.isRead) {
					this.$common.errorToShow('请先同意用户协议');
					this.isRead = 1
					setTimeout(() => {
						this.isRead = 0;
					}, 300)
					return
				}
			},
		}
	}
</script>

<style lang="scss">
	
	.serbox {
		display: flex;
		align-items: center;
		background: #F8F8F8;
		border-radius: 142px;
		height: 72rpx;
		padding: 0 26.66rpx;
		// margin-bottom: 20rpx;
	
		.serpic {
			width: 32rpx;
			height: 32rpx;
			flex-shrink: 0;
		}
	
		.serput {
			padding: 0 16rpx;
			width: 500rpx;
			font-size: 28rpx;
			color: #333333;
		}
	}
	
	.fix-top{
		position: fixed;
		// top: calc(var(--status-bar-height) + var(--window-top));
		top: calc(var(--status-bar-height) + var(--window-top));
		padding-top: 50px;
		left: 0;
		width: 100%;
		z-index: 99;
		background-color: #fff;
		
		.serbox {
			display: flex;
			align-items: center;
			background: #F8F8F8;
			border-radius: 142px;
			height: 72rpx;
			padding: 0 26.66rpx;
			margin: 20rpx 30rpx;
		
			.serpic {
				width: 32rpx;
				height: 32rpx;
				flex-shrink: 0;
			}
		
			.serput {
				padding: 0 16rpx;
				width: 500rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}
		
		
	}
	
	page {
		background: #f2f5f2;
	}

	.orderlist {
		padding-top: 100rpx;
		
		.empytView {
			padding-top: 200rpx;
		}

		.imgView {
			margin-left: 10px;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			// .imgList:nth-child(3n){
			// 	margin-right: 0;
			// }
			.imgList {
				position: relative;
				padding-bottom: 10rpx;
				margin-right: 11rpx;

				.imgClose {
					position: absolute;
					top: -1px;
					right: -1px;
					z-index: 1;
					width: 26rpx;
					padding-bottom: 2px;
					padding-left: 2px;
					padding-right: 2px;
					height: 26rpx;
					background-color: #45C4B0;
					color: #fff;
					line-height: 26rpx;
					text-align: center;
					border-radius: 100px;
				}
				
				.imgClose2 {
					position: absolute;
					top: -1px;
					right: -1px;
					z-index: 1;
				}
			}

			.imgList:not(:first-child) {
				// margin-left: 15rpx;
			}
		}

		.zhanwei {
			width: 100%;
			height: 100px;
			float: left;
		}

		width: 92%;
		margin-left: 4%;

		.top_nav {
			margin-top: 10px;
			width: 100%;
			height: 37px;
			line-height: 37px;
			text-align: center;
			border-radius: 0.5em;
			background: #fff;

			image {
				width: 15px;
				height: 15px;
				position: relative;
				top: 3px;
			}

			span {
				margin-left: 6px;
				font-size: 12px;
				color: #999;
			}
		}

		.cont {
			width: 100%;
			border-radius: 0.5em;
			background: #fff;
			margin-top: 13px;
			color: #3d3d3d;
			font-weight: 640;
			float: left;

			.cont_s {
				width: 90%;
				margin-left: 5%;

				.con_top {
					padding-top: 12px;
					width: 100%;
					font-size: 14px;
					float: left;
					padding-bottom: 12px;
					border-bottom: 1px solid rgba(153, 153, 153, 0.1);

					view {
						float: left;

						&:last-child {
							float: right;
							color: #45C4B0;
							font-size: 13px;
							font-weight: 500;
						}
					}
				}
			}

			.con_nav {
				margin-top: 10px;
				width: 100%;
				float: left;

				.navs {
					.icon {
						width: 14px;
						height: 14px;
						border-radius: 6px;
						padding: 2px 3px;
						background: #45C4B0;
						float: left;
						font-size: 9px;
						line-height: 14px;
						color: #fff;
						text-align: center;
						position: relative;
						top: 2px;
						margin-right: 5px;
					}

					.xie {
						background: #7AAAF2 !important;
					}

					.navs_right {
						.tp {
							font-size: 15px;
							width: 90%;
							overflow: hidden; //隐藏
							white-space: nowrap; //不换行
							text-overflow: ellipsis; //超出部分省略号
						}

						.bom {
							margin-left: 25px;
							width: 100%;
							color: #999;
							font-size: 12px;
							font-weight: 400;
							margin-top: 5px;
							margin-bottom: 10px;
						}
					}
				}

				.con_bomt {
					font-weight: 400;
					width: 86%;
					padding-left: 7%;
					padding-right: 7%;
					padding-bottom: 15rpx;
					background: rgba(216, 216, 216, 0.3);
					color: #999;
					font-size: 10px;
					border-radius: 0.5em;
					padding-top: 5px;

					span {
						color: #45C4B0;
					}

					overflow-wrap:break-word
				}
			}

			.bomt {
				margin-top: 12px;
				padding-bottom: 8px;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				;
				float: left;
				width: 100%;
				font-size: 15px;

				.bomt_a_left {
					float: left;
				}

				.bomt_a_right {
					float: right;
					color: #45C4B0;
					font-size: 16px;

					span {
						font-size: 12px
					}

					;
				}
			}

			.bomt_one {
				width: 100%;
				float: left;
				margin-top: 20rpx;
				height: 100rpx;

				view {
					width: 290rpx;
					height: 64rpx;
					line-height: 64rpx;
					border-radius: 0.2em;
					font-size: 26rpx;
					text-align: center;

					&:first-child {
						float: left;
						// margin-left: 10px;
						background: rgba(216, 216, 216, 0.3);
						color: #999;
					}

					&:last-child {
						float: right;
						// margin-right: 10px;
						background: #45C4B0;
						color: #fff;
					}
				}
			}
		}

		.tarb_new {
			position: fixed;
			bottom: 0px;
			background: #fff;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
			left: 0px;
			height: 50px;
			width: 100%;
			padding-top: 10px;

			view {

				width: 50%;
				margin: 0 auto;
				float: left;
				text-align: center;

				image {

					margin: 0 auto;
					height: 20px;
					width: 28px;
				}

				view {
					font-size: 12px;
					width: 100%;
					text-align: center;
					float: left;
					color: #999999;
				}

			}

			;
		}


		.zong {
			position: fixed;
			width: 90%;
			text-align: center;
			margin: 0 auto;
			// margin-left: 5%;
			top: 15%;
			z-index: 102;
		}

		.biaoqian {

			border-radius: 0.5em;
			background: #fff;
			width: 600rpx;
			margin: 0 auto;

			.top {
				padding-top: 70rpx;
				font-size: 28rpx;
				color: #000;
				text-align: center;
				width: 90%;
				margin-left: 5%;
				margin-bottom: 15rpx;

				image {
					width: 130rpx;
					height: 130rpx;
					position: absolute;
					left: 265rpx;
					top: -35px;
					margin: 0 auto;
					border-radius: 20em;
				}

				view {
					&:first-child {
						font-weight: 700;
						font-size: 16px;
						color: #3D3D3D;
					}

					&:last-child {
						margin-top: 6px;
						font-size: 12px;
						color: #999;

						font-weight: 700;
					}
				}
			}

			.tab {
				padding-top: 5rpx;
				font-size: 21rpx;
				font-weight: 700;
				width: 90%;
				margin-left: 5%;
				float: left;
				text-align: center;

				textarea {
					width: 88%;
					font-weight: 500;
					background: rgba(216, 216, 216, 0.3);
					padding: 10px 10px;


					padding-bottom: 20px;
					margin-left: 16rpx;
					border-radius: 0.5em;
					text-align: center;
					float: left;
					color: #999;
					text-align: left;
					height: 100px;
				}

				.c1 {
					opacity: 1;
					font-family: Source Han Sans CN;
					font-size: 12px;
					font-weight: normal;
					line-height: normal;
					letter-spacing: 0em;
					color: #999999;
				}
			}

			.not_like {
				width: 86%;
				margin-left: 7%;
				border-radius: 0.5em;
				text-align: center;
				float: left;
				color: #999;
				font-size: 27rpx;
				margin-top: 40rpx;
				text-align: left;
				padding-bottom: 20px;
				background: rgba(216, 216, 216, 0.3);

				.tp {
					padding: 5px 10px;
					font-size: 12px;
					border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				}

				image {
					margin-top: 5px;
					width: 60px;
					height: 60px;
					float: left;
					border-radius: 0.5em;
					margin-left: 5px;

					&:first-child {
						margin-left: 0px;
					}
				}
			}

			.line {
				margin-top: 30rpx;
				width: 88%;
				margin-left: 6%;
				float: left;
				height: 0px;
				opacity: 1;
				border: 1rpx solid rgba(153, 153, 153, 0.1);
			}

			.cont_t {
				border-radius: 8px;
				opacity: 1;
				background: #45C4B0;
				float: left;
				width: 80%;
				height: 86rpx;
				margin-left: 10%;
				margin-right: 10%;
				text-align: center;
				margin-top: 30rpx;
				color: #fff;
				line-height: 86rpx;

			}

			.cont_b {
				float: left;
				width: 100%;
				text-align: center;
				margin-top: 20rpx;
				background: rgba(69, 196, 176, 0.05);
				float: left;
				width: 92%;
				height: 86rpx;
				margin-left: 4%;
				color: #45C4B0;

				.t1 {
					width: 50%;
					margin: 0 auto;
					margin-top: 20rpx;

					image {
						width: 33rpx;
						;
						height: 33rpx;
						float: left;
					}

					.tex {
						float: left;
						margin-left: 10rpx;
					}
				}


			}
		}

		.cl1 {
			height: 60rpx;
			width: 60rpx;
			position: relative;
			top: 110rpx;
		}

		.zhezhao {
			height: 100vh;
			position: fixed;
			top: 0rpx;
			right: 0px;
			width: 100%;
			z-index: 101;
			background: rgba(51, 51, 51, 0.6);
		}

	}
</style>